<template>
	<div>
		<div class="flex-between-center">
			<span>{{ placeholder || '无' }}</span>
			<el-popover
				v-model="showPopover"
				width="200"
				:title="`批量设置-${placeholder || ''}`"
				trigger="click"
				@hide="iptVal = null"
			>
				<div class="flex-start-center">
					<jk-input v-model="iptVal" :clearable="false" type="date" size="small" style="width: 100%;" value-format="yyyy-MM-dd" :placeholder="placeholder" />
				</div>
				<div class="flex-center margin-top-10">
					<el-button type="primary" size="mini" class="width-100-percent" @click="onConfirmBtnOfPopover">确定</el-button>
				</div>
				<div slot="reference" class="el-icon-edit"></div>
			</el-popover>
		</div>
	</div>
</template>
<script>
    export default {
        props: {
            placeholder: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                iptVal: '',
                showPopover: false
            };
        },
        methods: {
            onConfirmBtnOfPopover() {
                this.showPopover = false;
                this.$emit('on-confirm', this.iptVal);
                this.iptVal = null;
            }
        }
    };
</script>
